{% load static %}
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>能信安在线权限对比系统</title>
    <!--    <link rel="stylesheet" type="text/css" href="/vendor/bootstrap/css/bootstrap.min.css">-->
    <!--    <link rel="stylesheet" type="text/css" href="/fonts/font-awesome-4.7.0/css/font-awesome.min.css">-->
    <!--    <link rel="stylesheet" type="text/css" href="/vendor/animate/animate.css">-->
    <!--    <link rel="stylesheet" type="text/css" href="/vendor/select2/select2.min.css">-->
    <link rel="stylesheet" type="text/css" href="{% static 'vendor/perfect-scrollbar/perfect-scrollbar.css' %}">
    <!--    <link rel="stylesheet" type="text/css" href="/css/table_util.css">-->
    <link rel="stylesheet" href="{% static 'css/table.css' %}">
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>

<body>
    <header class="permcomp-header">
        <div class="header-container">
            <!--            <div class="logo">-->
            <!--                <div class="logo-floater"></div>-->
            <!--                <img src="/images/logo.png" />-->
            <!--            </div>-->
            <h1 class="title">能信安在线权限分析系统</h1>
            <!--            <h4 class="subtitle">v 1.0.0</h4>-->
        </div>
    </header>
    <main class="permcomp-main">
        <div class="main-container">
            <div class="comparator-section">
                <form action="#" method="post" class="comparator-form" th:action="@{/perm-comp}"
                    th:object="${permComparison}">
                    {% csrf_token %}
                    <div class="form-group perm-text-group">
                        <label for="perm-text">{{ form.desc_text.label }}</label>
                        {{ form.desc_text }}
                        <!-- <textarea
                            id="perm-text" class="permission-text" placeholder="在这里填写敏感权限声明文本" th:field="*{senseText}"
                            wrap="off"></textarea> -->
                    </div>
                    <div class="button-group comp-submit-button-group">
                        <input class="button button-success" type="submit" value="开始对比" />
                        <input class="button button-danger" type="reset" value="重置表单" />
                    </div>
                    <div class="form-group perm-list-group">
                        <label for="perm-list">{{ form.perm_text.label }}</label>
                        {{ form.perm_text }}
                        <!-- <textarea
                            id="perm-list" class="permission-list" placeholder="在这里填写 APP 中出现的权限，每行一个权限"
                            th:field="*{permsList}" wrap="off"></textarea> -->
                    </div>
                </form>
            </div>
            <div class="required-perm-table-section">
                <div class="container-table100">
                    <div class="wrap-table100">
                        <div class="table-title">
                            <h2>申请权限列表</h2>
                        </div>
                        <div class="table100 ver1 m-b-120">
                            <div class="table100-head">
                                <table>
                                    <thead>
                                        <tr class="row100">
                                            <th class="table-cell">
                                                权限名称</th>
                                            <th class="table-cell">中文名称</th>
                                            <th class="table-cell">权限等级
                                            </th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <div class="table100-body js-pscroll">
                                <table>
                                    {% if valid_permissions %}
                                    <tbody>
                                        {% for valid_perm in valid_permissions %}
                                        <tr th:each="result : ${ permsSet }" class="row100 body">
                                            <td class="table-cell text-center">
                                                {{ valid_perm.en_name }}
                                            </td>
                                            <td class="table-cell text-center">
                                                {{ valid_perm.zh_name }}
                                            </td>
                                            <td class="table-cell text-center">
                                                {{ valid_perm.get_level_display }}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                    {% else %}
                                    <tbody>
                                        <tr>
                                            <td class="table-cell text-grey text-center">NULL</td>
                                            <td class="table-cell text-grey text-center">NULL</td>
                                            <td class="table-cell text-grey text-center">NULL</td>
                                        </tr>
                                    </tbody>
                                    {% endif %}
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="container-table100">
                    <div class="wrap-table100">
                        <div class="table-title">
                            <h2>过度索取权限列表</h2>
                        </div>
                        <div class="table100 ver1 m-b-120">
                            <div class="table100-head">
                                <table>
                                    <thead>
                                        <tr class="row100">
                                            <th class="table-cell">
                                                权限名称</th>
                                            <th class="table-cell">中文名称</th>
                                            <th class="table-cell">权限等级
                                            </th>
                                        </tr>
                                    </thead>
                                </table>
                            </div>
                            <div class="table100-body js-pscroll">
                                <table>
                                    {% if exceed_permissions %}
                                    <tbody>
                                        {% for exceed_perm in exceed_permissions %}
                                        <tr class="row100 body">
                                            <td class="table-cell text-center">
                                                {{ exceed_perm.en_name }}
                                            </td>
                                            <td class="table-cell text-center">
                                                {{ exceed_perm.zh_name }}
                                            </td>
                                            <td class="table-cell text-center">
                                                {{ exceed_perm.get_level_display }}
                                            </td>
                                        </tr>
                                        {% endfor %}
                                    </tbody>
                                    {% else %}
                                    <tbody>
                                        <tr>
                                            <td class="table-cell text-grey text-center">NULL</td>
                                            <td class="table-cell text-grey text-center">NULL</td>
                                            <td class="table-cell text-grey text-center">NULL</td>
                                        </tr>
                                    </tbody>
                                    {% endif %}
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- {% if not valid_permissions and not exceed_permissions %}
                <div class="blank-mission" th:unless="${ permsSet != null && exceedPermsSet != null }">
                    <h4>未检测到提交任务</h4>
                </div>
                {% endif %} -->
            </div>
        </div>
    </main>
    <footer class="permcomp-footer">
        <h3>Copyright<sup style="font-size: 0.5em;">&copy;</sup>
            能信安技术有限公司 2020 - 2021</h3>
    </footer>

    <script src="{% static 'vendor/jquery/jquery-3.2.1.min.js' %}"></script>
    <script src="{% static 'vendor/bootstrap/js/popper.js' %}"></script>
    <!--    <script src="/vendor/select2/select2.min.js"></script>-->
    <script src="{% static 'vendor/perfect-scrollbar/perfect-scrollbar.min.js' %}"></script>
    <script>
        $('.js-pscroll').each(function () {
            var ps = new PerfectScrollbar(this);
            $(window).on('resize', function () { ps.update();
            })
        });
    </script>

    <script src="{% static 'js/table.js' %}"></script>
</body>

</html>